<link rel="stylesheet" href="/vendor/dcat-admin/dcat/plugins/select/select2.css"></link>
<script src="/vendor/dcat-admin/dcat/plugins/select/select2.js"></script>
<script src="/vendor/js/echarts.min.js"></script>
<style type="text/css">
    .center{text-align: center!important;}
    .panel{
        width:100%;background-color: #fff;padding:15px 20px  30px 20px;
        border-radius: 5px;
        margin-bottom: 20px;
        position:relative;
    }
    .panel .btn-group{
        position: absolute;
        right: 15px;
        top:15px;
        border-radius: 4px;
        z-index: 9999;
    }
    .panel-title{
        font-size:18px;
    }
    .text-center{
        text-align: center;
    }
    .box-shadow{
        box-shadow:0 1px 3px 1px rgba(34, 25, 25, 0.1)
    }
    .flex-1{
        flex:1;
    }
    .inline{
        display: inline-block;
        vertical-align: top;
    }
    .flex{
        display:flex;
    }
    .flex-start{
        justify-content: flex-start;
        align-items: center;
    }
    .flex-between{
        justify-content: space-between;
        align-items: center;
    }
    .flex-end{
        justify-content: flex-end;
        align-items: center;
    }
    .flex-center{
        align-items: center;justify-content: center;
    }
    .table td{
        height: auto;
    }
    .tips{
        color:#999;font-size: 12px;padding-left: 20px
    }
    .number-lg{
        font-size: 40px;
    }
    .table-scroll{
        height: 150px;
        overflow-y: scroll;
    }
    .scroll::-webkit-scrollbar{/*滚动条整体部分，其中的属性有width,height,background,border等（就和一个块级元素一样）（位置1）*/
        display:none;
    }
    .achiev-table td,.achiev-table th{
        width:25%;
    }
    .service-table td,.service-table th{
        width:20%;
    }
    .service-table td:first-child, .service-table th:first-child{
        width:15%;
    }
    .service-table td:nth-child(4n-2),.service-table th:nth-child(4n-2){
        width:35%!important;
    }
    .user-table td,.user-table th{
        width:20%;
    }
    .user-table td:nth-child(4n-2),.user-table th:nth-child(4n-2){
        width:40%!important;
    }
    .share-user-table td,.share-user-table th{
        width:20%;
    }
    .share-user-table td:first-child,.share-user-table th:first-child{
        width:15%;
    }
    .share-user-table td:nth-child(5n-3),.share-user-table th:nth-child(5n-3){
        width:30%;
    }
    .city-list{
        width:120px;
    }
    .breadcrumb{
        display:none!important;
    }
    .content-header{
        position:relative;
    }
    .p-r-10{
        padding-right: 10px;
    }
</style>

<div class="panel">
    <div class="panel-title">代办事项</div>
    <div class="flex flex-between text-center" style="padding-top:20px">
        <div class="flex-1">
            <a href="#" class="number-lg text-warning" id="appoint_count" >1</a>
            <div>待发货订单</div>
        </div>
        <div class="flex-1">
            <a href="#" class="number-lg text-primary" id="service_count">1</a>
            <div>待收货订单</div>
        </div>
        <div class="flex-1">
            <a href="#" class="number-lg text-danger" id="after_count">1</a>
            <div>待售后订单</div>
        </div>
        <div class="flex-1">
            <a href="#" class="number-lg text-danger" id="after_count">99</a>
            <div>今日订单</div>
        </div>
    </div>
</div>
<div class="panel">
    <div class="panel-title">经营概况</div>
    <div class="btn-group btn-group-sm box-shadow normal-data-btns" role="group" aria-label="Basic example">
        <button type="button"  data-params='{"time":1}' class="btn ">今日</button>
        <button type="button"  data-params='{"time":2}' class="btn btn-primary">近30天</button>
        <button type="button"  data-params='{"time":3}' class="btn ">近1年</button>
    </div>
    <div class="flex flex-between text-center" style="padding-top:20px">
        <div class="flex-1">
            <div class="number-lg text-primary" id="service_order_count">10</div>
            <div>支付订单(笔)</div>
        </div>
        <div class="flex-1">
            <div class="number-lg text-danger" id="money_pay">1.00</div>
            <div>微信支付(元)
                {{--                <i class="feather icon-help-circle"   title=""></i>--}}
            </div>
        </div>
        <div class="flex-1">
            <a href="/user/list" class="number-lg text-green">1</a>
            <div>用户总数</div>
        </div>
        <div class="flex-1">
            <div class="number-lg text-green" id="regist_count">1</div>
            <div>新增用户</div>
        </div>
    </div>
</div>

<div class="flex flex-between">
    <div class="panel">
        <div class="panel-title">服务畅销排行</div>
        <div class="btn-group btn-group-sm box-shadow service-sale" role="group" aria-label="Basic example">
            <button type="button"  data-params='{"time":1}' class="btn ">今日</button>
            <button type="button"  data-params='{"time":2}' class="btn btn-primary">近30天</button>
            <button type="button"  data-params='{"time":3}' class="btn ">近1年</button>
        </div>
        <table class="table table-bordered  service-table" style="margin-top:20px">
            <thead>
            <tr >
                <th>排名</th><th>服务</th><th>收益金额(元)</th><th>预约次数</th>
            </tr>
            </thead>
        </table>
        <div class="table-scroll scroll">
            <table class="table table-bordered service-table" id="service-table" >

            </table>

        </div>
    </div>

</div>
<div class="flex flex-between">
    <div class="panel">
        <div class="panel-title">用户消费排行TOP100</div>
        <table class="table table-bordered user-table" style="margin-top:20px">
            <thead>
            <tr >
                <th>排名</th><th>昵称</th><th>头像</th><th>消费金额(元)</th>
            </tr>
            </thead>
        </table>
        <div class="table-scroll scroll">
            <table class="table table-bordered user-table" id="user-table">

            </table>
        </div>
    </div>

</div>

<script>
    var _token="{{csrf_token()}}";
    Dcat.ready(function () {

        $('.service-sale .btn').click(function(){
            let params=$(this).data("params");
            $(this).parent().find(".btn-primary").removeClass('btn-primary');
            $(this).addClass("btn-primary");

        });
        $('.service-sale .btn').eq(0).click();
        $('.normal-data-btns .btn').click(function(){
            let params=$(this).data("params");
            $(this).parent().find(".btn-primary").removeClass('btn-primary');
            $(this).addClass("btn-primary");
          
        });
        $('.normal-data-btns .btn').eq(0).click();

    });
</script>
